<template>
    <div class="header">
        <p class="title">待办事项</p>
        <input type="text" placeholder="请输入任务" class="new-todo" v-model="name" @keyup.enter="enterName">
        
    </div>
</template>

<script setup>
import { ref } from 'vue';
const emit = defineEmits (['add']);
const name = ref('');
function enterName() {
    emit('addToDo',name.value);
    name.value = '';    
}
</script>

<style scoped>
.header {
    box-shadow: 0px 2px 4px 5px #ddd;
}
.title {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: darkred;
}
.new-todo {
    width: 100%;
    height: 40px;
    box-shadow: inset 0px 2px 1px #ddd;
    padding: 6px 18px;
    font-size: 20px; 
}
</style>